<template>
  <div class="page">
      <div class="jd">
        <div class="data">
            <div class="title">
                土地入账价值
            </div>
            <div class="num">
                {{ landValue('landCost') }}
                <span class="unit">万元</span>
            </div>
        </div>
      </div>
      <div class="xf">
          <div class="data">
              <div class="title">
                  土地评估价值
              </div>
              <div class="num">
                  {{ landValue('landEvaluate') }}
                  <span class="unit">万元</span>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import {computed, onMounted, toRefs} from 'vue'
export default {
    props:{
      data:{
          type: Object,
          default(){
              return {}
          }
      }
    },
    name: "maintenanceCount",
    setup(props){
        let refProps = toRefs(props)
      let landValue = computed(() => {
          return type => {
              return refProps.data.value[type] || '--'
          }
      })

        onMounted(() => {

        })

        return {
            landValue,
            refProps
        }
    }
}
</script>

<style scoped lang="less">
.page{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  .jd, .xf{
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 20px;
    box-sizing: border-box;
    .data{
      .title{
        font-size: 16px;
        color: #CAD6F1;
      }
      .num{
        font-size: 24px;
        color: #fff;
        .unit{
          font-size: 16px;
        }
      }
    }
  }
  .jd{
    background: url("/src/assets/dwgk/LettersVisits_b.png") top left no-repeat;
    background-size: calc(100% - 20px) calc(100% - 40px);
  }
  .xf{
    background: url("/src/assets/dwgk/LettersVisits_g.png") top left no-repeat;
    background-size: calc(100% - 20px) calc(100% - 40px);
  }
}
</style>
